<template>
    <div class="page">
        <el-row>
            <el-col>
                <el-carousel height="200px" motion-blur>
                    <el-carousel-item v-for="item in 4" :key="item">
                        <h3 class="small justify-center" text="2xl">{{ item }}</h3>
                    </el-carousel-item>
                </el-carousel>
            </el-col>
        </el-row>
        <el-row class="row2">
            <el-col class="row2col1">
                <div class="row2col1table1tittle">
                    <img src="@/static/icons/pso.svg" width="20px" />
                </div>
                <!-- <el-select v-model="value" placeholder="Select" size="large" style="width: 240px">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select> -->
                <el-table class="row2col1table1" :data="tableData" :default-sort="{ prop: 'date', order: 'descending' }"
                    style="width: 100%">
                    <el-table-column fixed prop="players_name" :label="headerLabels.players_name" min-width="60" />
                    <el-table-column prop="played" :label="headerLabels.played" sortable min-width="45" />
                    <el-table-column prop="wins" :label="headerLabels.wins" sortable min-width="46" />
                    <el-table-column prop="loses" :label="headerLabels.loses" sortable min-width="40" />
                    <el-table-column prop="points" :label="headerLabels.points" sortable min-width="51" />
                    <el-table-column prop="wpa" :label="headerLabels.wpa" sortable min-width="58" />
                </el-table>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
// import type { TableColumnCtx } from 'element-plus';
import { ref, onMounted, onUnmounted } from 'vue';

interface User {
    players_name: string
    played: number
    wins: number
    loses: number
    points: number
    wpa: number
}

// 表头内容的动态变量
const headerLabels = ref({
    players_name: 'Players Name',
    played: 'Played',
    wins: 'Wins',
    loses: 'Loses',
    points: 'Points',
    wpa: 'wPA',
});

// 判断是否为小屏幕
const isSmallScreen = ref(false);

// 更新表头内容
const updateHeaderLabels = () => {
    if (isSmallScreen.value) {
        headerLabels.value = {
            players_name: 'Players',
            played: 'Pl',
            wins: 'W',
            loses: 'L',
            points: 'Pts',
            wpa: 'wPA',
        };
    } else {
        headerLabels.value = {
            players_name: 'Players Name',
            played: 'Played',
            wins: 'Wins',
            loses: 'Loses',
            points: 'Points',
            wpa: 'wPA',
        };
    }
};

// 监听窗口大小变化
const checkScreenSize = () => {
    isSmallScreen.value = window.innerWidth <= 700;
    updateHeaderLabels();
};

// 防抖函数
const debounce = (fn: { (): void; (): void; (): unknown; }, delay: number | undefined) => {
    let timer: number | undefined;
    return () => {
        clearTimeout(timer);
        timer = setTimeout(() => fn(), delay);
    };
};

// 保存防抖函数引用
const debouncedCheck = debounce(checkScreenSize, 100);

onMounted(() => {
    window.addEventListener('resize', debouncedCheck);
    checkScreenSize(); // 初始化检查
});

onUnmounted(() => {
    window.removeEventListener('resize', debouncedCheck);
});


// const formatter = (row: User, column: TableColumnCtx<User>) => {
//     return row.address
// }

const tableData: User[] = [
    {
        players_name: 'Enzo',
        played: 61,
        wins: 40,
        loses: 21,
        points: 78,
        wpa: 1.08
    },
    {
        players_name: 'ankeya',
        played: 87,
        wins: 45,
        loses: 41,
        points: 53,
        wpa: 0.48
    },
    {
        players_name: 'Cris',
        played: 59,
        wins: 34,
        loses: 25,
        points: 52,
        wpa: 0.79
    },
    {
        players_name: 'dash',
        played: 85,
        wins: 44,
        loses: 41,
        points: 50,
        wpa: 1.01
    },
]
</script>

<style scoped></style>

<style scoped src='@/static/Home/Tables/tablesPage.scss' />